<template>
  <view>
    <view class="container">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="120px" labelPosition="left">
        <view class="background-white bor-top">
          <uni-forms-item name="IMEICode" label="IMEI识别码">
            <input v-model="formData.IMEICode" type="text" placeholder="输入IMEI识别码" maxlength="15" />
          </uni-forms-item>
        </view>
      </uni-forms>
      <view class="text-content">
        <text>IMEI识别码是长15位的数字，可通过如下两种方式找到</text>
        <text>1. 打开手机「拨号界面」，输入【*#06#】，在弹出界面中复制。</text>
        <text>2. 打开手机【设置】界面，在【关于手机】栏目中查找。</text>
        <text>（注意：双卡手机会有两个IMEI码，复制其中一个即可）</text>
      </view>
      <view class="submit-imei px-20">
        <button class="u-button block" :ripple="true" @click="submit">保存</button>
      </view>
    </view>
  </view>
</template>
<script>
import { addOrUpdateImei, getImei } from '@/api/system/imei.js'
import store from '@/store'
export default {
  data() {
    var validatorCode = (rule, value, data, callback) => {
      if (value.length === 15 && /^\d+$/.test(value)) {
        return true
      } else {
        return callback('输入不合法')
      }
    }
    return {
      formData: {
        IMEICode: store.getters.imeiCode
      },
      rules: {
        IMEICode: {
          rules: [
            {
              required: true,
              errorMessage: '识别码不能为空'
            },
            {
              validateFunction: validatorCode
            }
          ]
        }
      }
    }
  },
  onLoad() {},
  methods: {
    submit() {
      this.$refs.form.validate().then((res) => {
        addOrUpdateImei(this.formData.IMEICode).then((res) => {
          this.$modal.showToast('保存成功')
          store.commit('SET_IMEI_CODE', this.formData.IMEICode)
          uni.navigateBack()
        })
      })
    }
  }
}
</script>
<style lang="scss">
.container {
  .background-white {
    background-color: #fff;
    padding: 10rpx 30rpx;
    box-sizing: border-box;

    ::v-deep .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    ::v-deep .uni-forms-item__content {
      display: flex;
      align-items: center;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }

    .text {
      padding-bottom: 20rpx;
      padding-top: 4rpx;
      color: #333;

      text {
        color: #666;
      }
    }
  }

  .text-content {
    color: #986263;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
  }
}
</style>
